<%--
  Created by IntelliJ IDEA.
  User: kinsky
  Date: 2022/3/4
  Time: 19:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/smallLogo.svg" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <style>

<%--        悬浮在a标签上会出现的效果--%>
        .cus_title .logo .title_list li a:hover+span{
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }

        /*给a标签上色*/
        .cus_title .logo .title_list li .home_index{
            color: #23b7b7 !important;
        }

        /*给span标签加三角形*/
        .cus_title .logo .title_list li .home{
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }v
    </style>
</head>
<body>
<jsp:include page="common/head.jsp"/>

<!--轮播图-->
<div class="carousel">
    <ul class="slides">
        <input type="radio" id="control-1" name="control" value="0" checked>
        <input type="radio" id="control-2" name="control" value="1">
        <input type="radio" id="control-3" name="control" value="2">
        <li class="slide">
            <p><strong>苏州神行 安心出行</strong><br><br> —— "让您随时随地享受无忧的用车服务！"</p>
        </li>
        <li class="slide">
            <p><strong>个性化定制用车方案</strong><br><br>"让您随时随地享受无忧的用车服务！"</p>
        </li>
        <li class="slide">
            <p><strong>自助取车无接触</strong><br><br>"安全出行 随需而用"</p>
        </li>

        <!--轮播图中的搜索框-->
        <form action="" id="searchForm">
            <div class="carousel-form">
                <input class="search-text" type="text" placeholder="查询地点、车型...">
                <input type="button" class="search-btn" value="搜索">
<%--                <button>SEARCH</button>--%>
            </div>
        </form>
        <!--左右按钮-->
        <div class="navigator slide-1">
            <label for="control-3">
                <p>&lt;</p>
            </label>
            <label for="control-2">
                <p>&gt;</p>
            </label>
        </div>

        <div class="navigator slide-2">
            <label for="control-1">
                <p>&lt;</p>
            </label>
            <label for="control-3">
                <p>&gt;</p>
            </label>
        </div>

        <div class="navigator slide-3">
            <label for="control-2">
                <p>&lt;</p>
            </label>
            <label for="control-1">
                <p>&gt;</p>
            </label>
        </div>

        <div class="control-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
        </div>
    </ul>
</div>


<!--热租车型-->
<div class="hotcar-box">
    <div class="hotcar-left">
        <span>热租车型</span>
        <img src="${pageContext.request.contextPath}/image/hotcar_banner.png" alt="">
    </div>
    <div class="hotcar-right">
        <div class="hotcar-right-text">
            <button>
                <span>查看更多></span>
            </button>
        </div>
        <ul class="hotcar-right-car">
            <li>
                <a href="">
                    <div class="hotcar-picker">
                        <div class="hotcar-name">大众高尔夫</div>
                        <div class="hotcar-type">
                            <span>舒适型 | 自动 | 5座</span>
                        </div>
                        <div class="hotcar-price">
                        <span>
                            <em>￥</em>
                            114
                        </span>
                            /天起
                        </div>
                        <img src="${pageContext.request.contextPath}/image/大众高尔夫.png" alt="">
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="hotcar-picker">
                        <div class="hotcar-name">荣威ERX5(混动)</div>
                        <div class="hotcar-type">
                            <span>SUV | 自动 | 5座</span>
                        </div>
                        <div class="hotcar-price">
                        <span>
                            <em>￥</em>
                            250
                        </span>
                            /天起
                        </div>
                        <img src="${pageContext.request.contextPath}/image/荣威ERX5(混动).png" alt="">
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="hotcar-picker">
                        <div class="hotcar-name">本田奥德赛</div>
                        <div class="hotcar-type">
                            <span>商务型 | 自动 | 7座</span>
                        </div>
                        <div class="hotcar-price">
                        <span>
                            <em>￥</em>
                            438
                        </span>
                            /天起
                        </div>
                        <img src="${pageContext.request.contextPath}/image/本田奥德赛.png" alt="">
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="hotcar-picker">
                        <div class="hotcar-name">大众ID_4CROZZ</div>
                        <div class="hotcar-type">
                            <span>电动型 | 自动 | 5座</span>
                        </div>
                        <div class="hotcar-price">
                        <span>
                            <em>￥</em>
                            329
                        </span>
                            /天起
                        </div>
                        <img src="${pageContext.request.contextPath}/image/大众ID_4CROZZ.png" alt="">
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

<!--网页页脚-->
<div class="home-footer">
    <div class="footer-nav">
        <ul>
            <span class="">新手指南</span>
            <li><a href="">注册新用户</a></li>
            <li><a href="">预定演示</a></li>
            <li><a href="">取消或修改订单</a></li>
            <li><a href="">租车协议</a></li>
        </ul>
        <ul>
            <span class="">租车贴士</span>
            <li><a href="">支付方式</a></li>
            <li><a href="">精彩活动</a></li>
            <li><a href="">增值服务</a></li>
        </ul>
        <ul>
            <span class="">会员服务</span>
            <li><a href="">忘记密码</a></li>
            <li><a href="">会员充值</a></li>
            <li><a href="">积分说明</a></li>
        </ul>
        <ul>
            <span class="">网站帮助</span>
            <li><a href="">神行租车动态</a></li>
            <li><a href="">网站帮助</a></li>
            <li><a href="">联系我们</a></li>
        </ul>
        <img src="${pageContext.request.contextPath}/image/nav_brand.svg" alt="">
    </div>
    <div class="footer-copyright">
        <hr>
        <ul>
            <li><a href="">关于神行</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">移动客户端</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">帮助中心</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">建议专区</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">联系我们</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">联系我们</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">友情连接</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">投诉通道：400-821-1608</a><span>&nbsp;|&nbsp;</span></li>
            <li><a href="">营业执照</a></li>
        </ul>
        <div style="clear:both"></div>
        <br>
        <span class="">Copyright © 2007-2022 苏州godfly信息技术服务有限公司   ICP证：苏B2-20140130   违法和不良信息举报：complaint@godfly.cn</span>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/index.js"></script>


<%--首页热门数据--%>
<script>
    var url = '${pageContext.request.contextPath}/indexHot';
    console.log(url)

    window.onload = function () {
        $.ajax({
            url: '${pageContext.request.contextPath}/indexHot',
            type: 'get',
            async: true,
            dataType: 'json',
            success: function (result) {
                console.log(JSON.stringify(result));
                console.log(result.data)
                var carArray = result.data;
                $(".hotcar-right-car").html("");
                for (var i = 0; i < carArray.length; i++) {
                    var carId = carArray[i].carId;
                    console.log(carId)
                    var shopId = carArray[i].shopId;
                    console.log(shopId)
                    var carBrand = carArray[i].carBrand;
                    console.log(carBrand)
                    var carName = carArray[i].carName;
                    console.log(carName)
                    var carType = carArray[i].carType;
                    console.log(carType)
                    var carImage = carArray[i].carImage;
                    console.log(carImage)
                    var carDailyPrice = carArray[i].carDailyPrice;
                    console.log(carDailyPrice)
                    var carSeatCount = carArray[i].carSeatCount;
                    console.log(carSeatCount)
                    var liEle = '<li>' +
                        '<a href="${pageContext.request.contextPath}/shop/' + shopId + '/page/1?carId=' + carId + '">' +
                        '<div class="hotcar-picker">' +
                        '<div class="hotcar-name">' + carBrand + carName + '</div>' +
                        ' <div class="hotcar-type">' +
                        '<span>' + carType + ' | 自动 | ' + carSeatCount + '</span>' +
                        '</div>' +
                        '<div class="hotcar-price">' +
                        '<span>' +
                        '<em>￥</em>' + carDailyPrice + '</span>/天起' + ' </div>' +
                        '<img src="${pageContext.request.contextPath}/' + carImage + '" alt="">' +
                        ' </div>' +
                        '</a>' +
                        '</li>'
                    $(".hotcar-right-car").append(liEle);
                }


            }
        })
    };

</script>
</body>
</html>
